<template>
  <div>
    <div class="calendar-panel" :style="panelHeight">

      <left-time :weekTime="weekTime" :morningHidden="morningHidden"
                 :nightHidden="nightHidden"
                 @changeMorningHidden="changeMorningHidden"
                 @changeNightHidden="changeNightHidden"
      />


      <div class="week-calendar ">
        <div :class="[index===0?'fixed':'','row ']" v-for="(row, index) in calendarLineNum" :key="index+'row'">
          <div class="calendar-row "  @contextmenu.prevent>
          </div>
        </div>

        <div class="schedule ">
          <div class="schedule-row " v-for="(row, index) in scheduleLineNum" :key="index+'schedule-row'"
               @contextmenu.prevent="showMenu(daySelect,morningHidden?index+6:index,
               weekTime[morningHidden?index+6:index].name,weekTime[morningHidden?index+7:index+1].name)"
          >
            <div class="schedule-content "
                 v-if="scheduleContentHeight(weekTime[morningHidden?index+6:index],schedule.beginDate,schedule.endDate).height!=='0px'"
                 v-for="(schedule,inxs) in getScheduleList" :key="inxs"
                 :style="scheduleContentHeight(weekTime[morningHidden?index+6:index],schedule.beginDate,schedule.endDate)">
              <div @click="menuSchedule(schedule,inxs,morningHidden?index+6:index)" :class="scheduleTheme[schedule.group]" class="text">
                <div class="schedule-time">{{schedule.beginDate.substring(11,16)}}-{{schedule.endDate.substring(11,16)}}</div>
                {{schedule.content}}
              </div>
            </div>
            <div class="schedule-content all-day" :class="scheduleTheme[schedule.group]"
                 v-if="index===0&&isAllDay(schedule.beginDate,schedule.endDate)"
                 v-for="(schedule,inxs) in getScheduleList" :key="inxs"
                 @click="menuSchedule(schedule,inxs,morningHidden?index+6:index)"
            >
              {{schedule.content}}
            </div>
            <vue-context-menu :contextMenuData="contextMenuData"
                              @add="addScheduleModel"
                              @edit="addScheduleModel"
                              @del="deleteSchedule"
                              @detail="detailScheduleModel"
            ></vue-context-menu>

          </div>
        </div>



      </div>


    </div>
    <!--日程弹窗-->
    <model-schedule :x="contextMenuData.axis.x" :y="contextMenuData.axis.y"
                    :day="contextMenuData.axis.day" :contents="content" :groups="group"
                    :beginTime="beginTime" :endTime="endTime"
                    v-if="visible" @cancel="cancel" @addSchedules="addSchedules" @editSchedules="editSchedules"/>
    <!--日程详情弹窗-->
    <model-schedule-detail :x="contextMenuData.axis.x" :y="contextMenuData.axis.y"
                           :day="contextMenuData.axis.day" :contents="content" :groups="group"
                           :beginTime="beginTime" :endTime="endTime"
                           v-if="detailVisible" @cancel="cancel" />


  </div>
</template>

<script>
  import moment from 'moment'
  import scheduleList from '../mock/schedule'
  import ModelSchedule from "../tools/ModelSchedule";
  import ModelScheduleDetail from "../tools/ModelScheduleDetail.vue";
  import LeftTime from "./components/LeftTime"
  import { weekTimeList,timeEquation,timeSecondEquation,checkPosition,isAllDay } from "../utils/utils";

  export default {
    name: "days",
    components:{
      ModelSchedule,
      ModelScheduleDetail,
      LeftTime
    },
    props: {
      viewType: String,
      currentDate: Date,
    },
    data () {
      return {
        visible:false,
        morningHidden:true,
        nightHidden:true,
        detailVisible:false,
        selectAddSchedule:'',
        content:"",
        group:0,
        beginTime:'00:00',
        endTime:moment(new Date()).format('HH:mm'),
        editId:null,
        today: new Date().getDate(),
        scheduleList: scheduleList,
        scheduleTheme: 'blue,grayGreen,orange,red,purple,fuchsia'.split(','),
        // 菜单数据
        contextMenuData: {
          menuName: 'demo',
          //菜单显示的位置
          axis: {
            x: null,
            y: null,
            col: null,
            row: null,
            day:null
          },
          //菜单选项
          menulists: [
            {
              fnHandler: 'add', //绑定事件
              // icoName: 'fa fa-home fa-fw', //icon图标
              btnName: '新建日程' //菜单名称
            },
            /*{
              fnHandler: 'deletedata',
              // icoName: 'fa fa-minus-square-o  fa-fw',
              btnName: '编辑日程'
            }*/
          ]
        }
      }
    },
    computed: {
      panelHeight () {
        // 日历面板 每行高度
        return `height: ${(window.innerHeight - 80)}px`
      },
      weekTime () {
        // 周计划、日计划左侧时间
        return weekTimeList()
      },
      getScheduleList () {
        const groupResult = this.scheduleList.filter(item =>
          moment(item.beginDate).format('YYYYMMDD') === moment(this.currentDate).format('YYYYMMDD')

        )
        return groupResult
      },
      daySelect(){
        return new Date(this.currentDate).getDate();
      },
      calendarLineNum(){
        let num = 48;
        if(this.morningHidden&&!this.nightHidden){
          num -=12;
        }
        if(this.nightHidden&&!this.morningHidden){
          num -=5;
        }
        if(this.nightHidden&&this.morningHidden){
          num -=17;
        }
        return num;
      },
      scheduleLineNum(){
        let num = 24;
        if(this.morningHidden&&!this.nightHidden){
          num -=6;
        }
        if(this.nightHidden&&!this.morningHidden){
          num -=2;
        }
        if(this.nightHidden&&this.morningHidden){
          num -=8;
        }
        return num;
      }

    },
    mounted() {

    },
    methods: {
      isAllDay,
      showMenu (day,row,beginTime,endTime) {
        if(this.visible){return}
        this.content = "";
        this.group = 0;
        this.beginTime = beginTime;
        this.endTime = endTime;
        this.contextMenuData.menulists =
          [
            {
              fnHandler: 'add',
              icoName: 'iconfont icon-tianjia_huaban', //icon图标
              btnName: '新建日程'
            }
          ]
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // Get the current location
        this.contextMenuData.axis = {
          x, y,row,day
        }
      },

      addSchedules(content,group,beginDate,endDate){
        let json = {
          id:this.scheduleList[this.scheduleList.length-1].id+1,
          content,group,beginDate,endDate
        };
        this.scheduleList.push(json);
        this.visible = false;
        this.$message.info("新建日程成功！");
      },
      editSchedules(content,group,beginDate,endDate){
        // 更新ID是editId的
        this.scheduleList.forEach((item)=>{
          if(item.id===this.editId){
            item.content = content;
            item.group = group;
            item.beginDate = beginDate;
            item.endDate = endDate;
          }
        })
        this.visible = false;
        this.$message.info("编辑日程成功！");
      },
      addSchedule (day,month,col) {
        if (month === 'current') {
          this.visible = true;
          // 当月
          const date = new Date(this.currentDate.setDate(day))
        }
      },
      addScheduleModel(){
        this.checkXY();
        this.visible = true;
      },
      detailScheduleModel(){
        this.checkXY();
        this.detailVisible = true;
      },
      checkXY(){
        let x = this.contextMenuData.axis.x;
        let y = this.contextMenuData.axis.y;
        const json = checkPosition(x,y);

        this.contextMenuData.axis.x = json.x;
        this.contextMenuData.axis.y = json.y;
      },
      menuSchedule(item,col,row){
        if(this.visible){return}
        this.contextMenuData.menulists =
          [
            {
              fnHandler: 'edit',
              icoName: 'iconfont icon-bianji', //icon图标
              btnName: '编辑日程'
            },
            {
              fnHandler: 'del',
              icoName: 'iconfont icon-icon_huabanfuben', //icon图标
              btnName: '删除日程'
            },
            {
              fnHandler: 'detail',
              icoName: 'iconfont icon-chakan', //icon图标
              btnName: '查看日程'
            },
          ]
        let day = new Date(item.beginDate).getDate();
        // event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // let row = day>20?4:2;
        // Get the current location
        this.contextMenuData.axis = {
          x, y,col,row,day
        }
        this.content = item.content;
        this.group = item.group;
        this.beginTime = item.beginDate;
        this.endTime = item.endDate;
        this.editId = item.id;

      },
      deleteSchedule(){
        let _this = this;
        this.$confirm({
          content: '确定要删除该日程吗？',
          title:"提示",
          cancelText:"取消",
          okText:"确定",
          onOk() {
            _this.scheduleList = _this.scheduleList.filter(item=>item.id!==_this.editId);
            this.$message.info("日程删除成功！");
          },
        });
      },
      cancel(){
        this.visible=false;
        this.detailVisible=false;
      },
      /*根据日程时间计算高度*/
      scheduleContentHeight(rowTime,beginTime,endTime){
        let heights = 0;
        let h = timeEquation(rowTime.name,moment(new Date(beginTime)).format('hh:mm'));
        let t = timeEquation(rowTime.name,moment(new Date(endTime)).format('hh:mm'));
        let s = timeSecondEquation(rowTime.name,moment(new Date(endTime)).format('hh:mm'));
        if(h===0){
          let sh = s*10/6;
          heights = (t>0?t*100:0)+sh;
        }
        return {
          height:`${heights}px`
        }
      },
      changeMorningHidden(bool){
        this.morningHidden = bool
      },
      changeNightHidden(bool){
        this.nightHidden = bool
      },
    },
  }
</script>

<style lang="less" scoped>
  .borderT1{
    border:1px solid red;
  }
  .borderT2{
    border:1px solid #2E68F8;
  }
  @import "../tools/scheduleTheme";
  @import "../tools/scrollbar";
  @LineColor: #E6E5E6;
  @Gray: #B9B9B9;
  @PrimaryColor: #1C72E8;
  ul,li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .calendar-panel{
    overflow: auto;
    border-right: 1px solid #EFF1F7;
    display: flex;
    position: relative;
    .week-calendar{
      width: 100%;
      /*height: 100%;*/
      margin-top: 50px;
      .fixed{
        position: fixed;
        margin-top: -50px;
        width:calc(100% - 86px);
        background-color: #fff;
      }
      .row {
        display: flex;
        height: 50px;
        .calendar-row {
          width: 100%;
          display: flex;
          height: 100%;
          border-bottom: 1px solid #EFF1F7;
          &-item {
            width: 14.28%;
            height: 100%;
            overflow: auto;
            border-width:0 0 1px 1px;
            border-style: solid;
            border-color:  #EFF1F7;
          }
        }
      }
    }
    .schedule {
      position: absolute;
      left:86px;
      top: 0px;
      width:calc(100% - 86px);
      height: 100%;
      .schedule-row{
        width:100%;
        height: 100px;
        .schedule-content{
          width:100%;
          position: absolute;
          .schedule-time{
            font-weight: 700;
            padding: 4px 0;
          }
          .text{
            padding-right: 4px;
            width: 100%;
            height: 100%;
            overflow: auto;
          }
        }
        .all-day{
          height: 40px;
          margin: 5px 0;
          position: fixed;
          width: 100%;
          line-height: 40px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

      }

    }
  }

  .week-day{
    font-weight: 700;
    .today {
      width: 25px;
      height: 25px;
      display: inline-block;
      background: @PrimaryColor;
      text-align: center;
      color: white;
      border-radius: 50%;
      line-height: 25px;
    }
  }

</style>
<style>
  .context-menu-list{
    margin:5px 0!important;
  }
  .btn-wrapper-simple{
    height: 20px!important;
    line-height: 20px!important;
  }
  .btn-wrapper-simple:hover{
    color: #fff;
  }
  .vue-contextmenu-listWrapper{
    box-shadow: 0 5px 20px 0 var(--KPromeMenu-color-shadow,rgba(0,0,0,.3))!important;
  }
</style>
